<script setup>
import { reactive } from "@vue/reactivity";
import Hecharts from "./components/Hecharts.vue"; 
import {options1,options2} from "./assets/options/options"
import customed from "./assets/themes/customed.json"
import test from "./assets/themes/test.json"
const hdata = reactive({
  width:'500px',
  options:options1,
  // options2:options2,
  myTheme:customed,
  // myTheme:test,

})
// 改变宽度
function changeWidth(){
  if(hdata.width=='500px'){
    // console.log('等于700，改为800');
    hdata.width='800px'
    // console.log('打印一下width',hdata.width);
  }else{
    hdata.width='500px'
  }
}
// 改变数据源：
const changeOption=()=>{
  /* console.log('打印出options',hdata.options);
  console.log('打印出options1',options1);
  console.log('打印出options2',options2);
  // 定义函数 */
  if(hdata.options.title.text == options1.title.text){
    // console.log('相等');
    hdata.options = options2
  }else{
    // console.log('不相等');
    hdata.options = options1
  }
}
// 改变主题：
const changeTheme=()=>{
  if(hdata.myTheme.backgroundColor==customed.backgroundColor){
        hdata.myTheme=test
        // console.log('myTheme==customed,,执行了吗');
        // console.log('这是样式t');
      }else{
        // console.log('打印this.myTheme',this.myTheme);
        // console.log('打印customed',customed);
        // console.log('打印test',test);
        // console.log('这是样式c');
        hdata.myTheme=customed
      }
}

</script>

<template>
  <Hecharts :width="hdata.width" :options="hdata.options" :theme="hdata.myTheme"></Hecharts>
  <button @click="changeWidth">改变宽度</button>
  <button @click="changeOption">改变数据源</button>
  <button @click="changeTheme">改变主题</button>
</template>

<style>
</style>
